<template>
    <div class="container">
        <div class="head-bar">
            <div class="bc-color-box"></div>
            <div class="tips-box">
                <img class="width-40 height-40" v-if="fileSpace" :src="fileSpace + '/images/success-icon-white.png'" alt="">
                <div class="font-18 font-white font-w mar-l-15">开通成功!</div>
            </div>
            <div class="info-box">
                <div class="info-content">
                    <div class="info-pay font-30 font-w mar-b-18">
                        <span class="font-16">￥</span>56.9
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                        订单编号：<span class="font-color">SH20199080922262452152</span>
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                        下单时间：<span class="font-color">2019-08-09 21:24:14</span>
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                        支付时间：<span class="font-color">2019-08-09 21:24:14</span>
                    </div>
                     <div class="mar-b-10 font-13 font-color-6">
                        订单状态：<span class="font-color">已完成</span>
                    </div>
                    <div class="mar-b-10 font-13 font-color-6">
                        开通工具：<span class="font-color">门店核销</span>
                    </div>
                     <div class="font-13 font-color-6 pad-b-25">
                        到期时间：<span class="font-color">2019-08-09 21:24:14</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="button-box font-15 flex flex-between">
            <button class="home" @click="back_click">返回上一级</button>
            <button class="details">进入核销台</button>        
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    back_click() {
      this.$pt.navigateBack({ delta: -1 })
    }
  }
}
</script>
<style lang="less" scoped>
@color-green: #20b675;
.head-bar{
    position: relative;
    background-size: 100% 30%;
    .bc-color-box{
        position: absolute;
        top: 0;
        left: 0;
        background: #24ba75;
        height: 160px;
        width: 100%;
    }
    .tips-box{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 50px;
        padding-bottom: 36px;
    }
    .info-box{
        position: relative;
        width: 100%;
        .info-content{
            position: relative;
            background: url('https://veekrayimg.joinsun.vip/images/pay-success-img.png');
            background-size: 90% 100%;
            background-repeat: no-repeat;
            background-position-x: 50%;
            padding: 0 45px;
            .info-pay{
                padding: 40px 0 18px 0;
                border-bottom: 1px dashed #94a09b;
                text-align: center;
            }
        }
    }
}
.button-box{
    margin-top: 35px;
    button{
        width: 150px;
        height: 42px;
        border: 1px solid @color-green;
        box-sizing: border-box;
        color: @color-green;
        background: white;
        line-height: 42px;
        text-align: center;
        border-radius: 20px;
        &::after{
            border: unset;
        }
    }
    .details{
        color: white;
        background: @color-green;
    }
}
</style>
